<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>权限分配</title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	<script src="../../../component/layui/layui.js"></script>
	<script src="../../../component/pear/pear.js"></script>
</head>

<body>
	<form class="layui-form" action="" lay-filter="give">
		<div class="mainBox">
			<div class="main-container">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs6">
						<div class="layui-card">
							<div class="layui-card-header">菜单权限</div>
							<div class="layui-card-body">
								<button type="button" class="layui-btn layui-btn-sm"
									lay-demo="setChecked_menu">全选</button>
								<button type="button" class="layui-btn layui-btn-sm"
									lay-demo="setUnChecked_menu">全不选</button>
								<div id="menuTree" class="demo-tree-more"></div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="layui-card">
							<div class="layui-card-header">接口权限</div>
							<div class="layui-card-body">
								<button type="button" class="layui-btn layui-btn-sm"
									lay-demo="setChecked_security">全选</button>
								<button type="button" class="layui-btn layui-btn-sm"
									lay-demo="setUnChecked_security">全不选</button>
								<div id="securityTree" class="demo-tree-more"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
				<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</body>

</html>

<script>
	layui.use(['form', 'jquery', 'context', 'permission', 'popup', 'tree', 'util', 'common', 'button'], function () {
		let form = layui.form;
		let $ = layui.jquery;
		let context = layui.context;
		let popup = layui.popup;
		let tree = layui.tree;
		let util = layui.util;
		let common = layui.common;
		let button = layui.button;

		let basePath = context.get("base-path");
		let currentId = common.getQueryString("id");

		var allMenuIds = [];
		var allMenuTreeList = [];
		var allSecurityIds = [];
		var allSecurityList = [];

		tree.render({
			id: "menuTree",
			elem: '#menuTree',
			data: [],
			checkChild: false,
			showCheckbox: true,
		});
		tree.render({
			id: "securityTree",
			elem: '#securityTree',
			data: [],
			checkChild: false,
			showCheckbox: true,
		});

		$.ajax({
			url: basePath + '/api/system/role/getrolepermission',
			data: JSON.stringify({ Id: currentId }),
			success: function (result) {
				allMenuTreeList = result.data.allMenuTreeList
				allMenuIds = allMenuTreeList.map(function (item, index) {
					return item.id
				})
				allSecurityList = result.data.allSecurityTreeList
				allSecurityIds = allSecurityList.map(function (item, index) {
					return item.id
				})


				tree.reload("menuTree", {
					data: allMenuTreeList,
				});
				tree.setChecked('menuTree', result.data.menuIds);

				tree.reload("securityTree", {
					data: allSecurityList,
				});
				tree.setChecked('securityTree', result.data.securityList);
			}
		})

		//按钮事件
		util.event('lay-demo', {
			setChecked_menu: function (othis) {//全选所有菜单
				tree.setChecked('menuTree', allMenuIds); //勾选指定节点
			},
			setUnChecked_menu: function (othis) {//清空所有菜单
				tree.reload("menuTree", {
					data: allMenuTreeList,
				});
			},
			setChecked_security: function (othis) {//全选所有权限
				tree.setChecked('securityTree', allSecurityIds); //勾选指定节点
			},
			setUnChecked_security: function (othis) {//清空所有权限
				tree.reload("securityTree", {
					data: allSecurityList,
				});
			},
		});

		form.on('submit(save)', function (data) {
			var btn = button.load({ elem: 'button[lay-filter=save]' });
			$.ajax({
				url: basePath + "/api/system/role/setrolepermission",
				data: JSON.stringify({
					id: currentId,
					menuIds: getCheckedId(tree.getChecked('menuTree')),
					securityList: getCheckedId(tree.getChecked('securityTree'))
				}),
				success: function (result) {
					btn.stop(function () {
						if (result.succeeded) {
							popup.success("权限配置成功", function () {
								parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
								parent.layui.table.reload("table");
							});
						} else {
							popup.failure(JSON.stringify(result.errors));
						}
					})
				}
			})
			return false;
		});

		function getCheckedId(jsonObj) {//获取tree选中的id
			var id = "";
			$.each(jsonObj, function (index, item) {
				if (id != "") {
					id = id + "," + item.id;
				}
				else {
					id = item.id;
				}
				var i = getCheckedId(item.children);
				if (i != "") {
					id = id + "," + i;
				}
			});
			var ids = id.split(',')
			return ids;
		}
	})
</script>